<template>
  <div class="container deal-order deal-issue">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="发布交易" />
    <div class="my-deal-header">
      <div class="deal-type" @click="changeHead(1)" :style="type == 1 ? 'color:#ffffff' : ''">出售</div>
      <div class="deal-type" @click="changeHead(2)" :style="type == 2 ? 'color:#ffffff' : ''">购买</div>
      <div class="deal-bg" :class="headerClass"></div>
    </div>
    <div class="top-bg"></div>
    <div class="deal-price font-family-din">{{allMoney}}</div>
    <div class="deal-title">交易总额（CNY）</div>
    <u--form :validate-first="true" :show-error-message="false" class="deal-form">
      <div class="input-line">
        <div class="input-title">输入单价 <span>(参考价-无限大)</span></div>
        <u--input v-model="price" name="price" type="number" :placeholder="'请输入'+(type == 1 ? '出售' : '购买')+'YKB的单价'" />
      </div>
      <div class="input-line">
        <div class="flex-between-center title-div">
          <div class="input-title">输入{{type | fixType}}数量</div>
          <div class="input-all" v-if="type == 1">当前持有：{{dealInfo.num}}YKB</div>
        </div>
        <u--input v-model="number" name="num" type="digit" :placeholder="'请输入'+(type == 1 ? '出售' : '购买')+'数量'" />
        <div class="service-div" v-if="type == 1">
          手续费：{{serviceNum}}YKB
        </div>
      </div>
      <div class="input-line">
        <div class="input-title">安全密码</div>
        <u--input v-model="password" name="password" type="password" maxlength="6" placeholder="请输入安全密码" />
      </div>
      <div>
        <u-button type="primary" @click="onSubmit">发布订单</u-button>
      </div>
    </u--form>
  </div>
</template>

<script>
  import {
    getApplyInfo,
    putIssueApply
  } from '@/api/deal/index.js'
  import md5 from '../../utils/md5.js'
  export default {
    filters: {
      fixType(val) {
        return val == 1 ? '出售' : '购买'
      }
    },
    data() {
      return {
        type: 1,
        price: '',
        statusBarHeight: '',
        number: '',
        password: '',
        answer: '',
        headerClass: '',
        dealInfo: {},
        allMoney: 0, //总金额
        serviceNum: 0, //手续费
      }
    },
    watch: {
      // 小数监听 只允许输入小数点后两位
      price(value) {
        value = String(value)
        const index = value.indexOf('.')
        if (index !== -1) {
          if (value.substring(index + 1).length > 2) {
            value = value.substring(0, value.length - 1)
            this.price = parseFloat(value).toFixed(2)
          }
        }
        if (this.price > this.dealInfo.max_price) {
          this.price = this.dealInfo.max_price
        }
        this.allMoney = ((parseFloat(this.number) * 100) * (parseFloat(this.price) * 100) / 10000).toFixed(2)
        // if (this.type == 2) {
        //   if (this.price > this.dealInfo.sellMaxPrice) {
        //     this.price = this.dealInfo.sellMaxPrice
        //   }
        // } else {
        //   if (this.price > this.dealInfo.buyMaxPrice) {
        //     this.price = this.dealInfo.buyMaxPrice
        //   }
        // }
      },
      number(val) {
        if (this.type == 1) {
          if (val > Number(this.dealInfo.max_num_sell)) {
            this.number = this.dealInfo.max_num_sell
          }
          this.serviceNum = ((this.number * this.dealInfo.sell_rate) / 100).toFixed(2)
        } else {
          if (val > Number(this.dealInfo.max_num)) {
            this.number = this.dealInfo.max_num
          }
        }
        this.allMoney = ((parseFloat(this.number) * 100) * (parseFloat(this.price) * 100) / 10000).toFixed(2)
        // if (this.type == 2) {
        //   if (val > Number(this.dealInfo.sellMaxNum)) {
        //     this.number = this.dealInfo.sellMaxNum
        //   }
        // } else {
        //   if (val > Number(this.dealInfo.buyMaxNum)) {
        //     this.number = this.dealInfo.buyMaxNum
        //   }
        // }
      }
    },
    created() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 5;
      this.getInfo()
    },
    methods: {
      backClick() {
        uni.navigateBack()
      },
      getInfo() {
        let vm = this
        getApplyInfo().then(res => {
          if (res.code == 1) {
            let dealInfo = res.data
            dealInfo.max_num_sell = Math.floor((dealInfo.num * 100) / (Math.floor(dealInfo.sell_rate) + 100))
            vm.dealInfo = dealInfo
            vm.defualtData()
          }
        })
      },
      defualtData() {
        let vm = this
        vm.price = vm.dealInfo.min_price
        vm.number = vm.dealInfo.min_num
        // if (vm.type == 2) {
        //   vm.price = vm.dealInfo.sellMinPrice
        //   vm.number = vm.dealInfo.sellMinNum
        // } else {
        //   vm.price = vm.dealInfo.buyMinPrice
        //   vm.number = vm.dealInfo.buyMinNum
        // }
      },
      onSubmit(val) {
        let vm = this
        let price = parseFloat(vm.dealInfo.min_price)
        let num = Number(vm.dealInfo.min_num)
        if (vm.price < price) {
          vm.$ui.toast('最小' + (vm.type == 1 ? '出售' : '购买') + '单价为' + price)
        } else if (vm.num < num) {
          vm.$ui.toast('最小' + (vm.type == 1 ? '出售' : '购买') + '数量为' + num)
        } else {
          vm.type = vm.type
          putIssueApply({
            num: vm.number,
            price: vm.price,
            password: md5.hex_md5(vm.password),
            type: vm.type
          }).then(res => {
            if (res.code == 1) {
              vm.$ui.toast(res.msg)
              vm.resetData()
            }else {
              vm.$ui.toast(res.msg)
            }
          })
        }
      },
      resetData() {
        this.password = ''
        // this.defualtData()
        this.getInfo()
      },
      changeHead(index) {
        this.type = index
        if (index == 1) {
          this.headerClass = 'type-active-1'
        } else {
          this.headerClass = 'type-active-2'
        }
        this.getInfo()
        // this.defualtData()
      }
    }
  }
</script>

<style lang="less" scoped>
  .deal-issue {
    background: #F2F2F2;

    .deal-price {
      font-size: 52px;
      margin: 108px 0 28px;
      text-align: center;
    }

    .deal-title {
      font-size: 24px;
      margin-bottom: 80px;
      text-align: center;
    }

    .service-div {
      margin-top: 20px;
      text-align: right;
    }
  }
</style>
